<template>
	<view class="wrapper">
		<view @click="change(index)" :class="{'active': item.state}" class="item" v-for="(item,index) in group" :key="index">
			{{ item.title }}
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			group:{
				type: Array,
				default: () => [{
					title: '不带课本',
					state: false
				}]
			}
		},
		methods:{
			change(index){
				this.$emit('change',this.$attrs.id,index);
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper{
		display: inline-block;
		padding-right: 10px;
		margin: 5px 0px;
	}
.item{
	padding: 5px 17px;
	margin: 5px 5px 5px 0px ;
	display: inline-block;
	font-size:13px;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(57,66,91,1);
	border:1px solid rgba(57,66,91,1);
	border-radius:13px;
}
.active{
	color:rgba(255,255,255,1);
	background:rgba(64,89,255,1);
}
</style>
